import {View, Text, StyleSheet, Animated, Easing} from 'react-native'
import React, {Component} from 'react'
import {afterAnimation, defaultObj, getAssetUrl, isEmpty} from "../../../../util";
import FastImageCustom from "../../../widget/FastImageCustom";
import {inject, observer} from "mobx-react/custom";
import {Store} from "../../../../store";
import toast from "../../../common/ToastProxy";
import {screenWidth} from "../../../../style";

const AnimateView = Animated.View;

interface ProductInfoProps extends Store {

}

interface ProductInfoState {
    isLoaded: boolean,
    opacity: Animated.Value
}

@inject("product")
@observer
export default class ProductInfo extends Component<ProductInfoProps, ProductInfoState> {

    state = {
        isLoaded: false,
        opacity: new Animated.Value(0)
    };

    constructor(props: ProductInfoProps) {
        super(props);

    }

    componentDidMount() {

    }

    onLoadEnd = () => {
        this.setState({
            isLoaded: true
        }, () => {
            Animated.timing(this.state.opacity, {
                toValue: 1,
                easing: Easing.linear,
                duration: 1000
            }).start();
        })

    };

    render() {
        const {productDetail, imageSize} = this.props.product;
        if (isEmpty(productDetail.imageUrl)) {
            return <View style={{height: 500, backgroundColor: "#e2e2e2"}}/>
        }
        return (<View>
            <AnimateView style={{opacity: this.state.opacity}}>
                <FastImageCustom source={{uri: getAssetUrl(productDetail.imageUrl)}}
                                 onLoadEnd={this.onLoadEnd}
                                 style={{width: imageSize.width, height: imageSize.height}}
                                 resizeMode={"stretch"}/>
            </AnimateView>
            <View style={{height: 500, backgroundColor: "#e2e2e2", display: this.state.isLoaded ? "none" : null}}/>
        </View>)
    }
}

const ProductInfoStyle = StyleSheet.create({
    container: {}
});

 